<!-- 节假日游客分析 -->
<template>
  <div class="finish-com15">
    <div ref="maychar" style="width:300px;height:200px;background-color: rgba(0,0,0,0);" class=" finish-item">
    </div>
  </div>
</template>

<script>
export default {

  props: ['traffic'],
  data() {
    return {
      value1: 915,
      value2: 85,
    }
  },
  watch: {
    traffic(val) {
      console.log(val)
      this.changeTraffic(val)
      this.getCharts()
    }
  },
  mounted() {
    this.getCharts()
  },
  methods: {
    changeTraffic(val) {
      switch (val) {
        case '汉城景区':
          this.value1 = 915;
          this.value2 = 85;
          break;
        case '白水寺':
          this.value1 = 265;
          this.value2 = 735;
          break;
        case '古雕大观园':
          this.value1 = 325;
          this.value2 = 775;
          break;
        case '唐梓山':
          this.value1 = 365;
          this.value2 = 435;
          break;
        case '白竹园寺':
          this.value1 = 445;
          this.value2 = 555;
          break;
        case '熊河风景区':
          this.value1 = 445;
          this.value2 = 555;
          break;
        case '无量台':
          this.value1 = 315;
          this.value2 = 686;
          break;
      }
    },
    getCharts() {
      const chartBox = this.$echarts.init(this.$refs.maychar);
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center',
          textStyle: {
            fontSize: 18,
            color: '#fff'
          }
        },
        series: [
          {
            name: '景区停车位',
            center: ['50%', '40%'],
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
            },
            label: {
              show: false,
              position: 'center'
            },

            labelLine: {
              show: false
            },
            data: [
              { value: this.value1, name: '空闲停车位', itemStyle: { color: 'rgba(241, 238, 67, 0.4)' } },
              { value: this.value2, name: '已占用停车位', itemStyle: { color: 'rgba(90, 60, 190, 0.4)' } },
            ]
          }
        ]
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      }, { passive: true });
    }
  }
}
</script>

<style lang="scss" scoped>
.style {
  color: rgba(108, 68, 240, 0.4);
}
</style>